<template>
    <div style="background-color: #2c3e50">
        <el-row>
            <el-col :span="4" :offset="5">
                <el-avatar style="height: 150px;width: 150px;margin-top: 100px" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            </el-col>
            <el-col :span="9" >
                <div style="text-align: left;margin-top: 60px">
                    <h2 style="color: white;">个人介绍</h2>
                    <p style="color: white;margin-left: 20px">
                        首先，我是一个软件工程专业的学生，本人对计算机技术特别感兴趣，由于精力有限，暂时学习了Java后端知识。
                        然而，单单使用后端技术没有前端配合，就少了很多乐趣。在我做一下项目的时候，自己也学习了前端知识，后来感觉Vue和Element框架
                        比较好用，所以现在项目主要用这两个技术。这是本人使用Vue ElementUI创建的个人博客网站，主要分享个人学习
                        时的一下心得，和遇到的问题。
                    </p>
                    <h2 style="color: white;">技术栈</h2>
                    <div >
                        <el-tag class="my-tag" type="success">Java语言</el-tag>
                        <el-tag class="my-tag" type="success">Spring</el-tag>
                        <el-tag class="my-tag" type="success">SpringBoot</el-tag>
                        <el-tag class="my-tag" type="success">SpringCloud</el-tag>
                        <el-tag class="my-tag" type="success">SpringSecurity</el-tag><br>
                        <el-tag class="my-tag" type="warning">Redis</el-tag>
                        <el-tag class="my-tag" type="warning">Netty</el-tag>
                        <el-tag class="my-tag" type="warning">MySQL</el-tag>
                        <el-tag class="my-tag" type="warning">MyBatis</el-tag>
                        <el-tag class="my-tag" type="warning">MyBatisPlus</el-tag><br>
                        <el-tag class="my-tag">Html</el-tag>
                        <el-tag class="my-tag">JavaScript</el-tag>
                        <el-tag class="my-tag">css</el-tag>
                        <el-tag class="my-tag">Vue</el-tag>
                        <el-tag class="my-tag">Element</el-tag><br>
                        <el-tag class="my-tag" type="danger">C语言</el-tag>
                        <el-tag class="my-tag" type="danger">C++语言</el-tag>
                    </div>
                    <h2 style="color: white;">联系方式</h2>
                    <div style="color: white;margin-left: 20px;margin-bottom: 100px">
                        <b>邮箱:</b>tangming991@163.com<br>
                        <b>地址:</b>广东省广州市<br>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: "PeronCard"
}
</script>

<style scoped>
.my-tag{
    margin-left: 20px;
    margin-top: 10px;
}
</style>